<template>
	<view class="pages">
		<view class="shiping">
			<div class="videoTitle">{{videoTitle}}</div>
			<!-- 	<u-swiper :list="videoData" keyName="url" :indicator="indicator" indicatorMode="dot"   
				radius="8" :autoplay="false" height="318rpx" @change="slectchange" indicatorActiveColor="#638dfe" indicatorInactiveColor="#5170cc" style="width: 100%;"></u-swiper> -->
			<video :src="videoSrc" style="width: 100%;height: 318rpx;" height="150" type="video/mp4" controls :poster="poster"></video>
		</view>
		<mescroll-uni @init="mescrollInit" :top="410" @down="downCallback" :up="upOption" @up="upCallback">

			<view class="items" v-for="(items,index) in dadaList" :key="index" @click="per(items.id)">
				<view class="itemsLeft" @click.stop="$imgShow(items.cover)">
					<image :src="items.cover" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="itemsRight">
					<view class="itemsRightTxt">
						{{hotLength(items.title,20) || ''}}
					</view>
					<view class="itemsRightDate">
						<!-- {{items.speechTime | formatter('yyyy-mm-dd')}} -->
						{{hotLength(items.courseDescription,10) || ''}}
					</view>
					{{`${items.speechTime} ${hotLength(items.address,20)}`}}
					<!-- 未注册功能键 -->
					<view class="yichuce" v-if="items.isRecord == '1'">
						<view class="Register" @click.stop="gobiaoji(items)">
							<!-- Register -->
							{{$t('Course.Register')}}
						</view>
					</view>
					<!-- 已注册的功能键 -->
					<view class="weizhuce" v-else>
						<view class="Registered">
							<!-- Registered -->
							{{$t('Course.Registered')}}
						</view>
						<view class="Registered" @click.stop="save(items.cover)">
							<!-- Download Poster -->
							{{$t('Course.DownloadPoster')}}
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				indicator: true,
				videoTitle: '',
				videoSrc: '',
				poster:'',
				newUrl: 0, //0为新接口1为老接口
				userInfo: {
					...JSON.parse(uni.getStorageSync('user'))
				},
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "0rpx",
				dadaList: [],
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				videoData: [],
				src: 'https://app.myonewow.com/dev/file/download?id=1735244376486608898'
			}
		},
		onShow() {
			this.getList()
			this.getVideoId()
		},
		methods: {
			// 图片存相册
			save(imgurl) {
				let tip = 'Course.DownloadPostertps'
				this.$savePhoto(imgurl, tip)
			},
			per(id) {
				uni.navigateTo({
					url: `/pages/home/Course2?id=${id}`
				})
			},
			// 文字超出打点
			hotLength(val, len) {
				if (val) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			// 去标记
			gobiaoji(items) {
				this.$get(`/biz/app/recordCourse`, {
					userId: this.userInfo.id,
					courseId: items.id

				}, this.newUrl).then(res => {
					if (res.status) {
						this.getList()
					}
				})
			},
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			slectchange(e) {
				this.videoTitle = this.videoData[e.current].title
				console.log(e, 'eeee');
			},
			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/biz/app/coursePage`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					userId: this.userInfo.id,
				}, this.newUrl)
				console.log(res, 'res');
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					this.dadaList = this.dadaList.concat(res.data.data.records)
				}
				this.mescroll.endBySize(res.data.data.records.length, res.data.data.total)
			},
			// 获取视频的id
			getVideoId() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/biz/app/getVideos`, {}, this.newUrl).then(res => {
					uni.hideLoading()
					this.videoTitle = res.data.data[0].title
					const regex = /[?&]id=([^&]+)/;
					const match = res.data.data[0].video.match(regex);
					this.videoSrc = `${this.$newbaseUrl}/dev/video/play/${match[1]}`
					this.poster = res.data.data[0].cover
					// this.videoData = res.data.data.map(items => {
					// 	return {
					// 		url:items.video,
					// 		title:items.title,
					// 		poster:items.cover,
					// 		type:'video'
					// 	}
					// })
				}).catch(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		padding: 30rpx 25rpx 0;
		box-sizing: border-box;
		background-color: #F0F0F0;
	}

	.items {
		display: flex;
		justify-content: flex-start;
		width: 700rpx;
		height: 488rpx;
		background-color: #fff;
		border-radius: 16rpx;
		/* margin-top: 26rpx; */
		margin: 26rpx auto 0;
		padding: 26rpx;
		box-sizing: border-box;
	}

	.itemsLeft {
		width: 480rpx;
		height: 100%;
		background: rgba(39, 53, 98, 0.37);
		margin-right: 26rpx;
		/* height: 400rpx; */
		/* background-color: red; */
	}

	.itemsRight {}

	.itemsRightTxt {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.itemsRightDate {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 28px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.Registered {
		width: 336rpx;
		height: 80rpx;
		background-color: #fff;
		color: #273562;
		border-radius: 16rpx;
		font-weight: 700;
		border: 2rpx solid #273562;
		line-height: 80rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.Registered:first-child {
		margin: 12rpx 0 20rpx 20rpx;
	}

	.Register {
		width: 336rpx;
		height: 80rpx;
		background-color: #273562;
		color: #fff;
		border-radius: 16rpx;
		font-weight: 700;
		border: 2rpx solid #273562;
		line-height: 80rpx;
		text-align: center;
		margin: 118rpx 0 20rpx 20rpx;
	}

	.aderrs {
		font-size: 26rpx;
		color: #808080;
		font-weight: 100;
		margin-top: 40rpx;
	}

	.shiping {
		width: 100%;
		/* padding: 0 28rpx; */
		box-sizing: border-box;
	}

	.videoTitle {
		width: 100%;
		margin-bottom: 24rpx;
		text-align: center;
		font-family: Montserrat;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		color: #333;
	}
</style>